
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>帐号设置 - 麻雀博客</title>
  <link rel="stylesheet" href="${ctx.contextPath}/static/css/avatar.css">
  <#include "../common/link.ftl">
    <style type="text/css">
        .avatar-img{
            border: none;
            width: 100px;
            height: 100px;
            margin: 2px 1px;
            border-radius: 60px;
        }
        .checked{border:5px solid red;}
    </style>
</head>
<body>

<#include "../common/header.ftl">

<div class="layui-container fly-marginTop fly-user-main">

  <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="user">
        <li class="layui-nav-item">
            <a href="${ctx.contextPath}/user/home">
                <i class="layui-icon">&#xe68e;</i>
                我的主页
            </a>
        </li>
        <li class="layui-nav-item">
            <a href="${ctx.contextPath}/user/center">
                <i class="layui-icon">&#xe612;</i>
                用户中心
            </a>
        </li>
        <li class="layui-nav-item layui-this">
            <a href="#">
                <i class="layui-icon">&#xe620;</i>
                基本设置
            </a>
        </li>
        <li class="layui-nav-item">
           <a href="${ctx.contextPath}/user/post">
               <i class="layui-icon layui-icon-form">&#xe63c;</i>
              我的博客
           </a>
        </li>
        <li class="layui-nav-item">
            <a href="${ctx.contextPath}/user/message">
                <i class="layui-icon">&#xe611;</i>
                我的消息
            </a>
        </li>
    </ul>
  <#include "../common/user-nav.ftl">

  <div class="fly-panel fly-panel-user" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user">
      <ul class="layui-tab-title" id="LAY_mine">
          <#if title == "avatar">
              <li lay-id="info">我的资料</li>
              <li class="layui-this" lay-id="avatar">头像</li>
              <li lay-id="pass">密码</li>
              <li lay-id="bind">帐号绑定</li>
          <#elseif title == "pass">
              <li lay-id="info">我的资料</li>
              <li lay-id="avatar">头像</li>
              <li class="layui-this" lay-id="pass">密码</li>
              <li lay-id="bind">帐号绑定</li>
          <#elseif title == "bind">
              <li lay-id="info">我的资料</li>
              <li lay-id="avatar">头像</li>
              <li lay-id="pass">密码</li>
              <li class="layui-this" lay-id="bind">帐号绑定</li>
          <#else>
              <li class="layui-this" lay-id="info">我的资料</li>
              <li lay-id="avatar">头像</li>
              <li lay-id="pass">密码</li>
              <li lay-id="bind">帐号绑定</li>
          </#if>


      </ul>
      <div class="layui-tab-content" style="padding: 20px 0;">
        <div id="info_tab" class="layui-form layui-form-pane layui-tab-item">
          <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">手机</label>
              <div class="layui-input-inline">
                  <input type="text" id="L_phone" name="phone" value="${user.phone!''}" required="" lay-verify="phone" autocomplete="off" value="" readonly class="layui-input">
              </div>
              <#--<div class="layui-form-mid layui-word-aux">您需要完成手机验证才可进行社区发帖/回帖等操作</div>-->
          </div>
          <div class="layui-form-item">
            <label for="L_email" class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
              <input type="text" id="L_email" name="email" value="${user.email!''}" required lay-verify="email" autocomplete="off" value="" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <#if (user.activate!'') == "0">
                    设置邮箱后，需要到 <a href="${ctx.contextPath}/user/center" style="font-size: 14px; color: #4f99cf;">用户中心</a> 激活后才能作为账户登录使用
                <#elseif (user.activate!'') == "1">
                    如果您在邮箱已激活的情况下，变更了邮箱，需<a href="${ctx.contextPath}/user/activate" style="font-size: 14px; color: #4f99cf;">重新验证邮箱</a>。
                </#if>
            </div>
          </div>
          <div class="layui-form-item">
            <label for="L_username" class="layui-form-label">博客名</label>
            <div class="layui-input-inline">
              <input type="text" id="L_username" name="username" value="${user.username!''}" required lay-verify="required" autocomplete="off" value="" class="layui-input">
            </div>
            <div class="layui-inline">
              <div class="layui-input-inline">
                  <#if user.gender == "男">
                      <input type="radio" name="gender" value="男" checked title="男">
                      <input type="radio" name="gender" value="女" title="女">
                  <#else>
                      <input type="radio" name="gender" value="男" title="男">
                      <input type="radio" name="gender" value="女" checked title="女">
                  </#if>
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <label for="L_city" class="layui-form-label">城市</label>
            <div class="layui-input-inline">
              <input type="text" id="L_city" name="city" value="${user.city!''}" autocomplete="off" value="" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
              <label for="L_vercode" class="layui-form-label">验证码</label>
              <div class="layui-input-inline">
                  <input type="text" id="L_imagecode" name="imagecode" required="" lay-verify="required" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid" style="padding: 0!important;">
                  <img class="pointer" height="38" src="${ctx.contextPath}/code/captcha.jpg" alt="点击刷新" id="img_tag"/>
              </div>
          </div>
          <div class="layui-form-item layui-form-text">
            <label for="L_sign" class="layui-form-label">签名</label>
            <div class="layui-input-block">
              <textarea placeholder="随便写些什么刷下存在感" id="L_sign"  name="sign" autocomplete="off" class="layui-textarea" style="height: 80px;">${user.sign!''}</textarea>
            </div>
          </div>
          <div class="layui-form-item">
            <button class="layui-btn" key="set-mine" lay-filter="*" id="setinfo_btn">确认修改</button>
          </div>
        </div>

        <div id="avatar_tab" class="layui-form layui-form-pane layui-tab-item">

          <div class="layui-form-item" id="avatar_id">
              <p>选择您喜欢的头像:</p>
              <#list 1..13 as number>
                <#if (user.avatar!'') == "/static/images/avatar/${number}.jpg" >
                    <img class="pointer avatar-img checked" src="${ctx.contextPath}/static/images/avatar/${number}.jpg">
                <#else >
                    <img class="pointer avatar-img" src="${ctx.contextPath}/static/images/avatar/${number}.jpg">
                </#if>
              </#list>
          </div>

          <div class="layui-form-item">
            <button class="layui-btn" key="set-mine" lay-filter="*" id="avatar_btn">确认修改</button>
          </div>

        </div>

        <div id="pass_tab" class="layui-form layui-form-pane layui-tab-item">

            <div class="layui-form-item">
              <label for="L_nowpass" class="layui-form-label">当前密码</label>
              <div class="layui-input-inline">
                <input type="password" id="nowpass" name="nowpass" required lay-verify="required" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label for="L_pass" class="layui-form-label">新密码</label>
              <div class="layui-input-inline">
                <input type="password" id="pass" name="pass" required lay-verify="required" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">6到16个字符</div>
            </div>
            <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">确认密码</label>
              <div class="layui-input-inline">
                <input type="password" id="repass" name="repass" required lay-verify="required" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <button class="layui-btn" key="set-mine" lay-filter="*" id="update_pass_btn">确认修改</button>
            </div>

        </div>

        <div id="bind_tab" class="layui-form layui-form-pane layui-tab-item">
          <ul class="app-bind">
            <li class="fly-msg app-havebind">
              <i class="iconfont icon-qq"></i>
              <span>已成功绑定，您可以使用QQ帐号直接登录Fly社区，当然，您也可以</span>
              <a href="javascript:;" class="acc-unbind" type="qq_id">解除绑定</a>

              <!-- <a href="" onclick="layer.msg('正在绑定微博QQ', {icon:16, shade: 0.1, time:0})" class="acc-bind" type="qq_id">立即绑定</a>
              <span>，即可使用QQ帐号登录Fly社区</span> -->
            </li>
            <li class="fly-msg">
              <i class="iconfont icon-weibo"></i>
              <!-- <span>已成功绑定，您可以使用微博直接登录Fly社区，当然，您也可以</span>
              <a href="javascript:;" class="acc-unbind" type="weibo_id">解除绑定</a> -->

              <a href="" class="acc-weibo" type="weibo_id"  onclick="layer.msg('正在绑定微博', {icon:16, shade: 0.1, time:0})" >立即绑定</a>
              <span>，即可使用微博帐号登录Fly社区</span>
            </li>
          </ul>
        </div>
      </div>

    </div>
  </div>
</div>

<#include "../common/footer.ftl">
<script type="text/javascript">
    $('#img_tag').on('click', function(){
        $("#img_tag").attr("src" ,"${ctx.contextPath}/code/captcha.jpg?t=" + $.now());
    });

    $("#setinfo_btn").on("click", function () {
        if (!check_phone_email($("#L_phone")) || !check_phone_email($("#L_email"))
                || !check_val($("#L_imagecode"))) {
            return false;
        }

        var id = "${user.id}";
        var phone = $("#L_phone").val();
        var email = $("#L_email").val();
        var username = $("#L_username").val();
        var gender = $("input[name='gender']:checked").val();
        var city = $("#L_city").val();
        var imagecode = $("#L_imagecode").val();
        var sign = $("#L_sign").val();

        $.ajax({
            url: "${ctx.contextPath}/user/setinfo",
            type: "POST",
            dataType: "JSON",
            data: {id:id, phone:phone, email:email, username:username,
                   gender:gender, city:city, sign:sign, imagecode:imagecode},
            success: function (result) {
                if (result.status == "0") {
                    error_msg(result.msg);
                } else {
                    success_msg(result.msg);
                }
            }
        });

    });

    $("#update_pass_btn").on("click", function () {
        var nowpass_input = $("#nowpass");
        var pass_input = $("#pass");
        var repass_input = $("#repass");

        if (!check_val(nowpass_input) || !check_passwd(pass_input)) {
            return;
        }

        if (pass_input.val() != repass_input.val()) {
            focus_addclass(repass_input);
            error_msg("两次输入密码不一致");
            return;
        }

        $.ajax({
            url: "${ctx.contextPath}/user/update_pass",
            type: "post",
            data: {nowpass:nowpass_input.val(), pass: pass_input.val()},
            dataType: "json",
            success: function (result) {
                if (result.status == "0") {
                    error_msg(result.msg);
                } else {
                    nowpass_input.val("");
                    pass_input.val("");
                    repass_input.val("");
                    success_msg(result.msg);
                }
            }
        });
    });

    $("#avatar_btn").on("click", function () {
        var avatar_src = "";
        $("#avatar_id").find('img').each(function () {
            var class_value = $(this).attr("class");
            if(class_value.indexOf("checked") != -1) {
                avatar_src = $(this).attr("src").replace("${ctx.contextPath}", "");
                return false;//退出each循环
            }
        });

        if (!avatar_src) {
            return;
        }

        $.ajax({
            url: "${ctx.contextPath}/user/set_avatar",
            type: "post",
            data: {avatar: avatar_src},
            dataType: "json",
            success: function (result) {
                if (result.status == "0") {
                    error_msg(result.msg);
                } else {
                    $("#header_avatar").attr("src", "${ctx.contextPath}" + avatar_src);
                    success_msg(result.msg);
                }
            }
        });
    });
    
    (function() {
        var tab_show = "${title}";
        if (tab_show == "info") {
            $("#info_tab").addClass("layui-show");
        } else if (tab_show == "avatar") {
            $("#avatar_tab").addClass("layui-show");
        } else if (tab_show == "pass") {
            $("#pass_tab").addClass("layui-show");
        } else {
            $("#bind_tab").addClass("layui-show");
        }

        var avatar_div = document.getElementById("avatar_id"),
                imgs = avatar_div.getElementsByTagName("img");
        for(var i = 0; i < imgs.length; i++){
            imgs[i].onclick = function() {
                for(var j = 0; j < imgs.length; j++){
                    if (imgs[j].className.indexOf("checked") !== -1 ) {
                        imgs[j].classList.remove("checked");
                    }
                }
                this.classList.add("checked");
            }
        }
    })();
</script>
</body>
</html>